<template>
  <div id="map-container">
    <el-popover placement="left" :width="225" trigger="click">
      <template #reference>
        <div class="map-type-container">
          <el-icon :size="25" :color="'#009aff'">
            <PictureRounded />
          </el-icon>
        </div>
      </template>
      <div class="map-type-picture">
        <div class="title">选择底图</div>
        <div class="picture">
          <img @click="typeChange('vec')" :class="{ select: tileType == 'vec' }" src="../../assets/vec.jpg" alt="">
          <img @click="typeChange('img')" :class="{ select: tileType == 'img' }" src="../../assets/img.jpg" alt="">
          <img @click="typeChange('ter')" :class="{ select: tileType == 'ter' }" src="../../assets/ter.jpg" alt="">
        </div>
        <div class="showMark">
          <el-checkbox @change="markChange" v-model="showMark" label="地名" size="large" />
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { TIANDI_KEY } from '@/constant'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'

const projection = get("EPSG:4326")!;
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions: Array<number> = [];
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

import { CENTER_BLHX_LONG_LAT } from '@/constant'
import { PictureRounded } from '@element-plus/icons-vue'

let map: Map;
// 矢量底图
const tiandiMapTile_vec = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'vec',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      //resolutions: res.slice(0, 15),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
// 矢量标注
const tiandiMapTile_cva = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'cva',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
// 影像底图
const tiandiMapTile_img = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/img_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'img',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      //resolutions: res.slice(0, 15),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
// 影像标注
const tiandiMapTile_cia = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/cia_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'cia',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
// 地形底图
const tiandiMapTile_ter = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/ter_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'ter',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      //resolutions: res.slice(0, 15),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
// 地形标注
const tiandiMapTile_cta = new TileLayer({
  source: new WMTS({
    url: `http://t{0-6}.tianditu.com/cta_c/wmts?tk=${TIANDI_KEY}`,
    layer: 'cta',
    matrixSet: 'c',
    style: "default",
    crossOrigin: 'anonymous', // 如果不设置crossOrigin为anonymous 将无法将地图导出为图片 如无该需求可不添加
    format: "tiles",
    wrapX: true,
    tileGrid: new WMTSTileGrid({
      origin: getTopLeft(projectionExtent),
      resolutions: resolutions,
      matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
    })
  })
})
const showMark = ref(true)
const tileType = ref('vec')

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map-container',
    layers: [ tiandiMapTile_vec, tiandiMapTile_cva, tiandiMapTile_img, tiandiMapTile_cia, tiandiMapTile_ter, tiandiMapTile_cta ],
    view: new View({
      center: CENTER_BLHX_LONG_LAT,
      projection: projection,
      zoom: 3,
      maxZoom: 17,
      minZoom: 1
    })
  })
  typeChange('vec')
}

// 切换
const typeChange = (type: string) => {
  tileType.value = type
  layerControl()
  markControl()
}
// 地名切换
const markChange = () => {
  markControl()
}

function layerControl() {
  tiandiMapTile_vec.setVisible(tileType.value === 'vec')
  tiandiMapTile_img.setVisible(tileType.value === 'img')
  tiandiMapTile_ter.setVisible(tileType.value === 'ter')
}

function markControl() {
  tiandiMapTile_cva.setVisible(tileType.value === 'vec' && showMark.value)
  tiandiMapTile_cia.setVisible(tileType.value === 'img' && showMark.value)
  tiandiMapTile_cta.setVisible(tileType.value === 'ter' && showMark.value)
}
</script>
<style scoped>

#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-type-container {
  width: 35px;
  height: 35px;
  border: 1px solid #0e539a;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999;
  background-color: #fff;
  cursor: pointer;
}

.map-type-picture {
  width: 200px;
}

.map-type-picture .title {
  color: #000;
  font-weight: 600;
  font-size: 14px;
}

.map-type-picture .picture {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map-type-picture .picture img {
  width: 30%;
  cursor: pointer;
}

.select {
  border: 1px solid blue;
}


/* .map-type {
  width: 220px;
  height: 60px;
  border: 1px solid red;
  background-color: #ccc;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 999;
} */
</style>